<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--主体内容-->
    <el-card>
      <el-row>
        <el-col :span="6">
          <el-input v-model="roleName" @keyup.enter.native="findRole" placeholder="请输入角色名查询">
            <template slot="append">

              <el-button class="el-icon-search" type="primary" @click="findRole"></el-button>

            </template>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button class="add" @click="reset" type="primary">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button class="add" type="warning" @click="isShowAddRole=true">添加</el-button>
        </el-col>
      </el-row>

      <el-table
          height="500px"
          border
          max-height="600px"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="100">
        </el-table-column>
        <el-table-column
            prop="roleName"
            label="角色名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="200">
        </el-table-column>
        <el-table-column
            prop="modifiedTime"
            label="修改时间"
            width="200">
        </el-table-column>
        <el-table-column
            prop="status"
            label="是否禁用"
            width="80"
            align="center">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="updateStatus(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注">
        </el-table-column>
        <el-table-column
            align="center"
            prop=""
            label="操作"
            width="300">
          <template slot-scope="tableData">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="authorization(tableData.row.id)" plain>
              授权
            </el-button>
            <el-button type="success" @click="show(tableData.row)" size="mini" icon="el-icon-s-tools" plain>编辑
            </el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="ShowDeleteRole(tableData.row)" plain>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--f分页-->
      <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :current-page="current"
          :page-size="6">
      </el-pagination>


    </el-card>
    <!--编辑角色弹窗-->
    <amend @updateRoleList="findRole" :role-info="RoleInfo" :dialog-visible="dialogVisible"
           :visible.sync="dialogVisible"></amend>
    <!--删除角色弹窗-->
    <delete-role :role-info="RoleInfo" :is-show-delete-role="isShowDeleteRole"
                 :visible.sync="isShowDeleteRole"
                 @updateRoleList="findRole"></delete-role>
    <!--添加角色-->
    <add @updateRoleList="findRole" :role-info="RoleInfo" :isShowAddRole="isShowAddRole"
         :visible.sync="isShowAddRole"></add>

    <!-- TODO 弹出授权窗口-->
    <el-dialog
        title="提示"
        :visible.sync="isShowDialog"
        width="30%"
        @close="close"
    >
      <!--菜单树形图-->
      <el-tree
          v-loading="loading"
          :data="menuTree"
          :props="defaultProps"
          ref="tree"
          show-checkbox
          :default-expanded-keys="menuIdList"
          node-key="id"
          check-on-click-node
          :check-strictly="true"
          :expand-on-click-node="false"
          :default-checked-keys="menuIdList"
          @node-click="handleNodeClick"

      ></el-tree>

      <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>


<script>
import {getRole2Menu, getRoleList, saveMenu_Role, updateRoleStatus} from "@/network/system/role";
import amend from "@/views/system/Role/childComp/amend";
import deleteRole from "@/views/system/Role/childComp/deleteRole";
import add from "@/views/system/Role/childComp/add";
import {getMenuTree} from "@/network/system/menu";

export default {
  name: "roles",
  data() {
    return {
      roleId: undefined,
      loading: true,//加载
      menuIdList: [],//角色拥有的权限
      menuTree: [] //菜单树
      ,
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      roleName: '',
      tableData: [],//数据
      total: 0,//总条数，
      current: 1,  //当前页
      dialogVisible: false,  //控制弹出修改
      isShowDeleteRole: false,
      isShowAddRole: false, //是否显示删除角色页面
      isShowDialog: false,//是否显示授权页面
      RoleInfo: {}, //
      Status: {
        id: '',
        status: ''
      }

    }
  },
  components: {
    amend,
    deleteRole,
    add
  },
  created() {
    //获取角色列表
    this.getRoleList(1, 6)

  },
  methods: {
    /*处理树形图*/
    handleNodeClick(data, node) {
      console.log(node)
      this.childNodesChange(node)
      this.parentNodesChange(node)
    },
    childNodesChange(node) {
      let len = node.childNodes.length;
      for (let i = 0; i < len; i++) {
        node.childNodes[i].checked = false;
        this.childNodesChange(node.childNodes[i]);
      }
    },
    /*点击子节点处理父节点*/
    parentNodesChange(node) {
      if (node.parent) {
        for (let key in node) {
          if (key == "parent") {
            node[key].checked = true;
            this.parentNodesChange(node[key]);
          }
        }
      }
    },
    /*授权*/
    authorization(data) {
      console.log(data)
      this.roleId = data
      this.isShowDialog = true
      getMenuTree().then((res) => {
        this.menuTree = res.data.list
      })
      getRole2Menu(data).then((res) => {
        this.menuIdList = res.data.menuIdList
        this.loading = false

      })

    },
    updateStatus(row) {

      const state = row.status
      let text = ""
      if (row.status == '1') {
        text = "是否确认打开"
      } else {
        text = "是否确认关闭"
      }
      this.$confirm(text, "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        //确认，将改变后的状态值赋给绑定的itemValue
        this.Status.id = row.id
        this.Status.status = row.status
        console.log(this.Status)

        updateRoleStatus(this.Status).then((res) => {
          if (res.success) {
            this.$message({
              message: '恭喜你，修改角色状态成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: '警告哦，修改角色状态失败',
              type: 'success'
            });
          }
        }, () => {
          this.$message({
            message: '警告哦，修改角色状态失败',
            type: 'success'
          });
        })

      }, () => {
        row.status = state === 0 ? 1 : 0
      })

    },
    reset() {
      this.roleName = ''
      this.findRole()
    },
    //显示删除角色窗口
    ShowDeleteRole(data) {
      this.isShowDeleteRole = true
      this.RoleInfo = data
    },

    //显示编辑角色弹窗
    show(data) {
      this.dialogVisible = true
      this.RoleInfo = data
      // TODO 另一种写dialog的方法
      /*
      this.dialogTitle = "编辑角色"
      // this.dialogDat a = {}
      // this.dialogData = Object.assign({}, data)
      // this.visibleSync = true*/
    },
    //跳转到某页
    handleCurrentChange(val) {
      this.getRoleList(val, 6, this.roleName)
    },
    //获取角色列表
    getRoleList(current, size, roleName) {
      getRoleList(current, size, roleName).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.roleList.records
          this.total = res.data.roleList.total
          this.current = res.data.roleList.current
        }
      })
    },
    findRole() {
      this.getRoleList(this.current, 6, this.roleName)
    },
    /*TODO 关闭授权窗口*/
    close() {
      this.isShowDialog = false
      this.roleId = undefined
      this.menuTree = []
      this.menuIdList = []
    },
    submit() {
      console.log("关闭")
      console.log(this.$refs.tree.getCheckedKeys());
      const MenuIsList = this.$refs.tree.getCheckedKeys()
      console.log(this.roleId)
      saveMenu_Role(this.roleId, MenuIsList).then((res) => {
        console.log(res)
      })
      this.close()
    }

  }
}
</script>

<style scoped>
.add {
  margin-left: 20px;
}
</style>